@charset "utf-8";

@import "reset";

body{
    background: url(../../img/common/background.gif) fixed;
    background-size: 100%;
}
.all{
    width: 86%;
    min-width: 1060px;
    max-width: 1400px;
    margin: 0 auto;
    background: #000000;
    
    header{
        width: 100%;
        .header_top{
            height: 116px;
            >div:first-of-type{
                display: inline-block;
                margin-left: 42px;
                vertical-align: middle;
                margin-top:30px ;
            }
            >div:last-of-type{
                float: right;
                width: 60%;
                height: inherit;
                padding-right: 38px;
                padding-top: 20px;
                ul:first-of-type{
                    li{
                       padding: 0px 15px;
                       a{
                           font-size: 14px;
                           color: #787777;
                           img{
                               vertical-align: middle;
                           }
                           &::after{
                                content: "";
                                display: block;
                                border-bottom: 2px solid #0dafd2;
                                width: 0px;
                                margin: 0 auto;
                                margin-top: 5px;
                           }
                           &:hover{
                               color: #0dafd2;
                               &::after{
                                    transition: all .5s ease;
                                    width: 100%;
                               }
                           }
                           
                       }
                       &:last-of-type{
                           border-right: 1px solid #787777;
                       }
                    }
                }
                ul:last-of-type{
                    margin-top: 20px;
                    li{
                       padding: 0px 15px;
                       border-right: 1px solid #787777;;
                       &:first-of-type{
                           border-right: none;
                       }
                       a{
                           font-size: 14px;
                           color: #787777;
                           line-height: 100%;
                           font-size: 24px;
                           color: white;
                           &::after{
                                content: "";
                                display: block;
                                border-bottom: 2px solid #0dafd2;
                                width: 0px;
                                margin: 0 auto;
                                margin-top: 2px;
                           }
                           &:hover{
                               color: #0dafd2;
                               &::after{
                                    transition: all .5s ease;
                                    width: 100%;
                               }
                           }
                           
                       }
                       
                    }
                }
            }
        }
        .header_mian{
            height: 220px;
            >div:first-of-type{
                height: inherit;
                width: 30%;
                background: white;
                >div:first-of-type{
                    width: 50%;
                    float: left;
                    >div:first-of-type{
                        margin-top: 15px;
                        text-align: center;
                    }
                    >div:last-of-type{
                        width: 120px;
                        margin: 0 auto;
                        margin-top: 20px;
                        >div:first-of-type{
                            width: 50%;
                            float: left;
                            text-align: center;
                            border-right: 2px solid #787777;
                            p:first-of-type{
                                font-size: 12px;
                            }
                            p:last-of-type{
                                font-weight: bold;
                            }
                        }
                        >div:last-of-type{
                            width: 50%;
                            float: right;
                            text-align: center;
                            p:first-of-type{
                                font-size: 12px;
                            }
                            p:last-of-type{
                                font-weight: bold;
                            }
                        }
                    }
                }
                >div:last-of-type{
                    width: 50%;
                    float: right;
                    h2{
                        margin-top: 15px;
                        font-size: 24px;
                        span{
                            font-size: 12px;
                            color: #0dafd2;
                            font-weight: normal;
                            margin-left: 10px;
                        }
                    }
                    p{
                        font-size: 12px;
                         color: #787777;
                         line-height: 20px;
                         letter-spacing: 2px;
                    }
                    >span{
                        display: inline-block;
                        font-size: 12px;
                        color: #0dafd2;
                        font-weight: normal;
                        img{
                            margin-top: 5px;
                            margin-left: 5px;
                            vertical-align: text-bottom;
                        }
                    }
                    >div{
                        margin-top: 60px;
                        a{
                            margin: 0 10px;
                            &:hover{
                                border-bottom: 1px solid #0dafd2;
                            }
                        }
                    }
                }
            }
            >div:last-of-type{
                height: inherit;
                width: 70%;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
        }
        .header_bot{
            height: 70px;
            width: 100%;
            border-bottom: 2px solid #787777;;
            ul{
                height: inherit;
                display: inline-block;
                width: 804px;
                padding-left: 35px;
                li{
                    height: inherit;
                    display: inline-block;
                    margin: 0 20px;
                    a{
                        line-height: 70px;
                        font-size: 18px;
                         color: #787777;
                         &:hover{
                             color: white;
                         }
                    }
                }
            }
            >div{
                vertical-align: middle;
                padding: 2px;
                border: 1px solid #787777;
                margin-top: 20px;
                margin-right: 40px;
                input{
                    border:none;
                    height: 21px;
                    vertical-align: middle;
                    background: black;
                    color: white;
                    padding-left: 3px;
                    
                }
                div{
                    display: inline-block;
                    height: 21px;
                    width: 21px;
                    vertical-align: middle;
                    margin-right: 10px;
                    cursor: pointer;
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
    
    footer{
        width: 100%;
        .footer_main{
            width: 91%;
            min-width: 990px;
            margin: 0 auto;
            >ul{
                width: 100%;
                min-width: 990px;
                margin: 0 auto;
                height: 40px;
                border-bottom: 1px solid #929292;
                border-top: 1px solid #272727;
                >li{
                    display: inline-block;
                    a{
                        line-height: 40px;
                        color: #929292;
                        font-size: 12px;
                        &:hover{
                            color: #0dafd2;
                        }
                        &::after{
                            content: "";
                            height: 10px;
                            border-left: 2px solid #929292;
                            display: inline-block;
                            vertical-align: middle;
                            margin: -2px 6px 0;
                        }
                        
                    }
                    &:last-of-type{
                        a::after{
                            display: none;
                        }
                    }
                }
            }
            .footer_mid{
                font-size: 0;
                width: 100%;
                min-width: 990px;
                margin: 0 auto;
                padding: 11px 0;
                border-bottom: 1px solid #929292;
                >ul:first-of-type{
                    margin-left: 73px;
                    >li{
                        height: 27px;
                        display: inline-block;
                        vertical-align:  middle;
                        >a{
                            line-height: 27px;
                        }
                        &:first-of-type{
                            margin-right: 5px;
                            >a{
                               font-size: 12px;
                                color: #0dafd2; 
                            }
                        }
                        &:nth-of-type(2){
                            margin-right: 5px;
                        }
                        &:nth-of-type(3){
                            width: 70px;
                            margin-left: 5px;
                            overflow: hidden;
                            white-space: nowrap;
                            border-right: 1px solid #929292;
                            transition: all .5s;
                            &:hover{
                                width: 160px;
                            }
                            >a{
                                font-size: 12px;
                                color: #0dafd2;
                                margin-right: 5px;
                                span{
                                    border: 5px solid transparent;
                                    border-left: 5px solid #0dafd2;
                                    display: inline-block;
                                    vertical-align: baseline;
                                    margin-left: 12px;
                                }
                            }
                            
                        }
                        &:nth-of-type(4){
                            width: 70px;
                            margin-left: 5px;
                            overflow: hidden;
                            white-space: nowrap;
                            border-right: 1px solid #929292;
                            transition: all .5s;
                            &:hover{
                                width: 200px;
                            }
                            >a{
                                font-size: 12px;
                                color: #0dafd2;
                                margin-right: 5px;
                                span{
                                    border: 5px solid transparent;
                                    border-left: 5px solid #0dafd2;
                                    display: inline-block;
                                    vertical-align: baseline;
                                    margin-left: 12px;
                                }
                            }
                            
                        }
                        &:last-of-type{
                            margin-left: 5px;
                            margin-right: 5px;
                            >a{
                               font-size: 12px;
                                color: #0dafd2; 
                            }
                        }
                    }
                }
                >ul:last-of-type{
                    margin-right: 30px;
                    >li{
                        height: 27px;
                        display: inline-block;
                        vertical-align:  top;
                        &:first-of-type{
                            width: 45px;
                            height: 27px;
                            overflow: hidden;
                            transition: all .5s;
                            &:hover{
                                height: 80px;
                            }
                            >a{
                                font-size: 12px;
                                color: #0dafd2;
                                margin-right: 5px;
                                line-height: 27px;
                                span{
                                    border: 4px solid transparent;
                                    border-top: 4px solid #0dafd2;
                                    display: inline-block;
                                    margin-left: 7px;
                                    vertical-align: middle;
                                }
                            }
                        }
                        &:nth-of-type(2){
                            margin-right: 5px;
                            padding-top: 6px;
                            >a{
                                vertical-align: middle;
                            }
                        }
                        &:nth-of-type(3){
                            width: 60px;
                            height: 27px;
                            overflow: hidden;
                            transition: all .5s;
                            &:hover{
                                height: 80px;
                            }
                            >a{
                                line-height: 27px;
                                font-size: 12px;
                                color: #0dafd2;
                                margin-right: 5px;
                                span{
                                    border: 4px solid transparent;
                                    border-top: 4px solid #0dafd2;
                                    display: inline-block;
                                    margin-left: 7px;
                                    vertical-align: middle;
                                }
                            }
                        }
                        &:nth-of-type(4){
                            padding-top: 4px;
                            >a{
                                vertical-align: middle;
                            }
                        }
                        &:nth-of-type(5){
                            padding-top: 4px;
                            margin-right: 5px;
                            >a{
                                vertical-align: middle;
                            }
                        }
                    }
                }
            }
            .footer_bot{
                font-size: 0;
                width: 100%;
                min-width: 990px;
                margin: 0 auto;
                padding: 20px 20px;
                >div{
                    width: 90%;
                    margin: 0 auto;
                    text-align: center;
                    >div:first-of-type{
                        vertical-align: top;
                        margin-top: 10px;
                    }
                    >div:nth-of-type(2){
                        display: inline-block;
                        vertical-align: top;
                    }
                    >div:nth-of-type(3){
                        display: inline-block;
                        vertical-align: top;
                        font-size: 11px;
                        color: #929292;
                        text-align: left;
                        p{
                            line-height: 30px;
                            &:last-of-type{
                                line-height: 20px;
                                margin-top: 20px;
                            }
                        }
                        a{
                            font-size: 11px;
                            color: #929292;
                        }
                    }
                }
            }
        }
    }
    
}
